<template>
  <div class="content-item">
    <!--  左侧导航    -->
    <div class="device_left_list">
      <el-menu :default-active="dIndex" class="el-menu-vertical-demo" :unique-opened="true">
        <el-submenu :index="dIndex">
          <template slot="title">
            <span>设备类型</span>
          </template>
          <el-menu-item-group>
            <el-menu-item
              v-for="item in typeList"
              :key="item.index"
              @click="showDeviceList(item.index)"
              :index="item.index.toString()"
            >{{ item.name }}</el-menu-item>
          </el-menu-item-group>
        </el-submenu>
      </el-menu>
    </div>

    <!--  右侧设备列表    -->
    <div class="device_right_table">
      <el-button type="primary" @click="addDeviceType" style="margin: 15px 0" size="medium">添加</el-button>

      <el-table
        :data="tableData"
        border
        size="mini"
        v-loading="loading"
        :max-height="tableHeight"
        style="width: 100%;">
        <el-table-column prop="deviceType" label="设备类型">
          <template slot-scope="scope">
            {{ scope.row.deviceType | reWriteType }}
          </template>
        </el-table-column>
        <el-table-column prop="deviceNumber" label="设备编码"></el-table-column>
        <el-table-column prop="deviceCnName" label="设备名称"></el-table-column>
        <el-table-column prop="createTime" label="添加时间"></el-table-column>
        <el-table-column label="操作" width="150">
          <template slot-scope="scope">
            <el-button @click="editDevice(scope.row.id)" type="text" size="small">修改</el-button>
            <el-button @click="deleteDevice(scope.row.id)" type="text" size="small">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <Pagination :pageData="pageData" @pageNum="pageNumData" @pageSize="pageSizeData"></Pagination>
    </div>

    <!--  添加弹出框    -->
    <el-dialog :title="deviceTitle" width="500px" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <div class="infoModal">
          <span>设备编码:</span>
          <el-input style="margin-left: 10px" size="medium" v-model.trim="form.code" placeholder="请输入" />
        </div>
        <div class="infoModal">
          <span>设备名称:</span>
          <el-input style="margin-left: 10px" size="medium" v-model.trim="form.name" placeholder="请输入" />
        </div>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="dialogFormVisible = false">取 消</el-button>
        <el-button size="small" type="primary" @click="sureUp">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import Pagination from "../Pagination";
import HttpInterface from "../../../util/httpInterface";
import { messageBox } from "../../../util/utils";

export default {
  name: "DeviceTypeModel",
  components: {
    Pagination
  },
  data() {
    return {
      deviceTitle: '添加设备信息',
      dialogFormVisible: false,
      loading: false,
      tableHeight: 200,
      typeList: [
        {index: '1-1', name: '一般设备'},
        {index: '1-2', name: '主要设备'},
        {index: '1-3', name: '特种设备'},
        {index: '1-4', name: '关键设备'},
      ],
      pageData: {
        total: 0,
        pageNum: 1,
        pageSize: 20
      },
      form: {
        name: '',
        code: '',
      },
      tableData: [],
      dIndex: '1-1',
      editId: '0',
      index: "1-1",
    }
  },

  filters: {
    reWriteType(type) {
      if (type == '1-1') {
        return "一般设备";
      } else if (type == '1-2') {
        return "主要设备";
      } else if (type == '1-3') {
        return "特种设备";
      } else {
        return "关键设备";
      }
    }
  },

  created() {
    this.tableHeight = window.innerHeight - 240;
  },

  methods: {
    addDeviceType() {
      this.dialogFormVisible = true
      this.form.name = ""
      this.form.code = ""
      this.editId = "0"
    },

    //确定添加
    sureUp() {
      var _this = this
      var params = {
        deviceType: this.index,
        deviceNumber: this.form.code,
        deviceCnName: this.form.name
      }
      if (this.editId != 0) {
        params.id = this.editId
      }
      var url = this.editId == 0 ? HttpInterface.URL_DEVICETYPE_INSERT : HttpInterface.URL_DEVICETYPE_UPDATE;
      HttpInterface.requestPost(this, url, params, function (res) {
        let data = res.data;
        if (data.success) {
          _this.dialogFormVisible = false;
          _this.showDeviceList(_this.index);
          _this.successMessage("操作成功！");
        } else {
          _this.errorMessage("操作失败！");
        }
      }, null, false)
    },

    showDeviceList(index) {
      this.loading = true;
      this.index = index;
      var _this = this
      var params = {
        page: this.pageData.pageNum,
        size: this.pageData.pageSize,
        deviceType: index
      }
      HttpInterface.requestGet(this, HttpInterface.URL_DEVICETYPE_FINDPAGE, params, function (res) {
        var { success, other, msg } = res.data
        if (success) {
          _this.pageData.total = other.total
          _this.tableData = other.rows
        } else {
          _this.errorMessage(msg);
        }
        _this.loading = false;
      }, function () {
        _this.loading = false;
        _this.errorMessage('加载失败！');
      })
    },

    //编辑设备信息
    editDevice(id) {
      this.editId = id
      this.deviceTitle = "修改设备信息"
      this.dialogFormVisible = true
      var _this = this
      var params = {
        page: this.pageData.pageNum,
        size: this.pageData.pageSize,
        deviceType: this.index
      }
      HttpInterface.requestGet(this, HttpInterface.URL_DEVICETYPE_FINDPAGE, params, function (res) {
        var data = res.data
        data.other.rows.forEach(item => {
          if (item.id == id) {
            _this.form.name = item.deviceCnName
            _this.form.code = item.deviceNumber
          }
        })
      }, null)
    },

    // 删除
    deleteDevice(id) {
      var _this = this
      messageBox(() => {
        var params = { id };
        HttpInterface.requestGet(this, HttpInterface.URL_DEVICETYPE_DELETE, params, function (res) {
          let data = res.data;
          if (data.success) {
            _this.successMessage("删除成功！");
            _this.showDeviceList(_this.index);
          } else {
            _this.errorMessage("删除失败！");
          }
        }, null)
      })
    },

    pageNumData(page) {
      this.pageData.pageNum = Number(page);
      this.showDeviceList(this.index);
    },

    pageSizeData(page) {
      this.pageData.pageSize = Number(page);
      this.showDeviceList(this.index);
    }
  }
}
</script>

<style scoped lang="scss">
.content-item {
  display: flex;

  .device_left_list {
    width: 200px;
  }

  .device_right_table {
    flex: 1;
    box-sizing: border-box;
    padding: 0 20px;
  }

  .infoModal {
    display: flex;
    padding: 0 50px;
    margin: 20px;
    align-items: center;

    span {
      width: 100px;
      font-size: 14px;
      text-align: center;
    }
  }
}
</style>
